<template>
    <div class="content">
            <div class="qrcode">
                <div id="qrCode" ref="qrCodeDiv"></div>
            </div>
            <div class="middle-item">
                发证单位：<br/><br/>
                {{address}}<br/><br/>
                持证人：{{name}}<br/><br/>
                <span>（一人一证 扫码查验）</span>
            </div>
        </div>
</template>

<script>
import { getUserPermitByOpenId } from '@/api/yi-qing-fang-kong.js'
// import { Dialog } from 'vant'
// 获取用户信息
import { getUserLoginInfo } from '@/api/wx-api'
import QRcode from 'qrcodejs2'
export default {
  data () {
    return {
      id: '',
      address: '暂无',
      name: '暂无',
      openid: ''
    }
  },
  methods: {
    getMyInfo () {
      getUserLoginInfo().then(ret => {
      })
    },
    bindQRCode () {
      let qrcode = new QRcode('qrCode', {
        width: 100,
        height: 100, // 高度
        // text: 'http://sst.wanglanglang.com/#/epidemic-user-info?&id=' + this.id + '&openid=' + this.openid,
        text: 'http://sst.wanglanglang.com/#/epidemic-user-info?openid=' + this.openid, // 二维码内容
        render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f',
        // foreground: '#ff0'
      })
      console.log('-二维码-', qrcode)
    },
    init () {
      // const data = { id: this.id }
      getUserPermitByOpenId().then(ret => {
        const data = ret.data.data.result
        console.log('--提报成功页面--', ret.data.data.result)
        if (data) {
          this.id = data.id ? data.id : this.id
          this.openid = data.openid ? data.openid : this.openid
          this.name = data.name ? data.name : this.name
          if (data.community && data.street) {
            this.address = data.street + data.community + '居民委员会'
          } else if (data.street) {
            this.address = data.street + '居民委员会'
          }
          this.$nextTick(function () {
            this.bindQRCode()
          })
        }
        // if (ret.data.errcode === 10003) {
        //   Dialog.alert({
        //     message: '您暂无通行证，请录入个人信息'
        //   }).then(() => {
        //     this.$router.push({
        //       name: 'epidemic-submit',
        //       query: {
        //         'id': data.id
        //       }
        //     })
        //   })
        // }
      })
    }
  },
  mounted () {
    this.getMyInfo()
    this.init()
  }
}
</script>

<style scoped>
    .qrcode{
        /*display: flex;*/
        /*justify-content: center;*/
        /*align-items: center;*/
        bottom: 15px;
        right: 15px;
        position: absolute;
    }
    .middle-item{
        width: 100%;
        padding: 30px 0 0 0;
        font-size: 14px;
        color: #ffffff;
        padding-top: 95%;
    }
    .middle-item span{
        color: #000000;
    }
    .content{
        width: 100%;
        font-size: 12px;
        text-align: center;
        height: 100vh;
        background:0 0 no-repeat;
        background-size: 100% 100%;
        background-image: url("https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1581409936000/cb806175bac598586fbcf333649a2f5.png");
    }
</style>
